<template>
  <div class="container">
    <div class="header">
      <div class="selected">
        <van-field
          v-model="shipLock"
          is-link
          arrow-direction="down"
          readonly
          label=""
          placeholder="请选择"
          @click="showPicker = true"
        />
        <van-popup v-model:show="showPicker" round position="bottom">
          <!-- <van-picker
            title="选择船闸"
            :columns="shipLockOptions"
            :columns-field-names="customFieldName"
            @cancel="showPicker = false"
            @confirm="confirmShipLock"            
          /> -->
          <van-cascader
            v-model="cascaderValue"
            title="请选择"
            :options="shipLockOptions"
            @close="showPicker = false"
            @finish="confirmShipLock"
          />
        </van-popup>
      </div>          
    </div>
    <div class="tab">
      <van-tabs 
        v-model:active="tabActive" 
        swipe-threshold="4"
        @click-tab="onClickTab"
      >
        <van-tab title="基本信息">
          <div class="basic-info">
            <div class="item">
              <div class="name">船闸名称</div>
              <div class="value">{{ baseInfoObj.name }}</div>
            </div>
            <div class="item">
              <div class="name">所属航道</div>
              <div class="value">{{ baseInfoObj.channel }}</div>
            </div>             
            <div class="item">
              <div class="name">管理单位</div>
              <div class="value">{{ baseInfoObj.manage }}</div>
            </div>
            <div class="item">
              <div class="name">船闸等级</div>
              <div class="value">{{ baseInfoObj.slLevel }}</div>
            </div>
            <div class="item">
              <div class="name">当年变形预警情况</div>
              <div class="value">{{ baseInfoObj.alertSit }}</div>
            </div>
            <div class="item">
              <div class="name">安全评定等级</div>
              <div class="value">{{ shipLock == "西牛船闸" ? "--" : baseInfoObj.saveLvl }}</div>
            </div>
            <div class="item">
              <div class="name">变形监测周期</div>
              <div class="value">{{ baseInfoObj.cyc }}</div>
            </div>
            <div class="item">
              <div class="name">建成年份</div>
              <div class="value">{{ baseInfoObj.createYear }}</div>
            </div>
            <div class="item">
              <div class="name">已使用年限</div>
              <div class="value">{{ baseInfoObj.useYear }}</div>
            </div>
          </div>
        </van-tab>
        <van-tab title="变形监测分析">
          <div class="point-statistics">
            <div class="sub-item" style="padding-top: 16px;">
              <div class="title">
                <img src="../../static/images/icon-danzhou.png" alt="">
                <div>上月水坝单周期最大变形量</div>
              </div>
              <div class="sub-content">
                <div class="sub-info">
                  <div class="name">平面</div>
                  <div class="value">{{ defInfoData && defInfoData.plane? `${defInfoData.plane}mm` : '--' }}</div>
                </div>
                <div class="sub-info">
                  <div class="name">高程</div>
                  <div class="value">{{ defInfoData && defInfoData.elevation? `${defInfoData.elevation}mm` : '--' }}</div>
                </div>
              </div>
            </div>
            <div class="sub-item">
              <div class="title">
                <img src="../../static/images/icon-leiji.png" alt="">
                <div>上月水坝累计变形量 </div>
              </div>
              <div class="sub-content">
                <div class="sub-info">
                  <div class="name">水平方向</div>
                  <div class="value">{{ defInfoData && defInfoData.lastMonthpm? `＜${defInfoData.lastMonthpm}mm` : "--" }}</div>
                </div>
                <div class="sub-info">
                  <div class="name">垂直方向</div>
                  <div class="value">{{ defInfoData && defInfoData.lastMonthgc? `＜${defInfoData.lastMonthgc}mm` : "--" }}</div>
                </div>
              </div>
            </div>
            <div class="sub-item-two">
              <div class="sub-content-two">
                <div class="title">
                  <img src="../../static/images/icon-jiancedian.png" alt="">
                  <div>水坝变形监测点数量</div>
                </div>
                <div class="value">{{ defInfoData && defInfoData.pointNum? `${defInfoData.pointNum}个` : '--' }}</div>
              </div>
              <div class="sub-content-two">
                <div class="title">
                  <img src="../../static/images/icon-buzhi.png" alt="">
                  <div>水坝测站布置情况</div>
                </div>
                <div class="value">{{ defInfoData && defInfoData.arrangeSit || '--' }}</div>
              </div>
            </div>
            <div class="pic-text" @click="viewImage" v-if="defInfoData">
              <div>监测点布置示意图</div>
              <img src="../../static/images/icon-right-arrow.png" alt="">
            </div> 
          </div>               
          <div class="content"> 
            <div class="title">变形监测统计分析</div>
            <div class="btn-group">
              <div class="btn" :class="currentActive === 1? 'active' : ''" @click="currentActiveChange(1)" style="margin-right: 10px;">多点单周期图</div>
              <div class="btn" :class="currentActive === 2? 'active' : ''" @click="currentActiveChange(2)">单点多周期图</div>
            </div>
            <div class="filter">
              <template v-if="currentActive === 1">
                <van-field
                  is-link
                  arrow-direction="down"
                  readonly
                  label=""
                  placeholder="周期"
                  style="width: 25%;"
                />
                <van-field
                  v-model="cycle"
                  is-link
                  arrow-direction="down"
                  readonly
                  label=""
                  placeholder="请选择周期"
                  style="width: 40%;"    
                  @click="showCycle('cycle')"              
                />
                <div class="my-btn" style="width: 35%;">
                  <div class="btn" :class="currentType1 === '本次'? 'active' : ''" @click="changeType1('本次')">本次</div>
                  <div class="btn" :class="currentType1 === '累积'? 'active' : ''" @click="changeType1('累积')">累积</div>
                </div>                
              </template>   
              <template v-if="currentActive === 2">
                <div style="display: flex;flex-wrap: wrap">
                  <van-field
                    v-model="pointName"
                    is-link
                    arrow-direction="down"
                    readonly
                    label=""
                    placeholder="请选择点"
                    @click="!pointNameData.length? showToast('暂无数据') : showPointPickerFn()"
                    style="width: 50%;"
                  />
                  <van-field
                    v-model="singleType"
                    is-link
                    arrow-direction="down"
                    readonly
                    label=""
                    placeholder="请选择类型"
                    @click="showTypePickerFn()"
                    style="width: 50%;"
                  />
                  <van-field
                    v-model="singleValue1"
                    is-link
                    arrow-direction="down"
                    readonly
                    label=""
                    placeholder="请选择周期"
                    v-if="singleType === '周期'"
                    @click="showCycle('singleValue1')"   
                    style="width: 50%;" 
                  />
                  <van-field
                    v-model="singleValue2"
                    is-link
                    arrow-direction="down"
                    readonly
                    label=""
                    placeholder="请选择周期"
                    v-if="singleType === '周期'"
                    @click="showCycle('singleValue2')"   
                    style="width: 50%;"
                  />
                  <van-field
                    v-model="singleTime"
                    is-link
                    arrow-direction="down"
                    readonly
                    label=""
                    placeholder="请选择时间"
                    v-if="singleType === '时间'"
                    @click="showCalendarFn()"
                    style="width: 100%;"
                  />
                  <div class="my-btn" style="width: 35%;margin-left: 10px;">
                    <div class="btn" :class="currentType2 === '本次'? 'active' : ''" @click="changeType2('本次')">本次</div>
                    <div class="btn" :class="currentType2 === '累积'? 'active' : ''" @click="changeType2('累积')">累积</div>
                  </div> 
                </div>                  
                <van-popup v-model:show="showPointPicker" round position="bottom">
                  <van-picker
                    title=""
                    :columns="pointNameData"
                    @cancel="showPointPicker = false"
                    @confirm="confirmPoint"
                  />
                </van-popup>
                <van-popup v-model:show="showTypePicker" round position="bottom">
                  <van-picker
                    title=""
                    :columns="singleTypeData"
                    @cancel="showTypePicker = false"
                    @confirm="confirmType"
                  />
                </van-popup>
                <van-calendar 
                  v-model:show="showCalendar" 
                  type="range" 
                  @confirm="onConfirmCalendar" 
                  allow-same-day
                  :min-date="new Date(2000, 0, 1)" 
                  :max-date="new Date()"
                />
              </template>    
              <van-popup v-model:show="showCyclePicker" round position="bottom">
                <van-picker
                  title="选择周期"
                  :columns="cycleOptions"
                  :columns-field-names="cycleFieldName"
                  @cancel="showCyclePicker = false"
                  @confirm="confirmCycle"
                />
              </van-popup>                     
            </div>            
            <div id="lineChart1" style="height: 300px;"></div>             
          </div>   
          <div class="content" style="height: 360px;">
            <div class="title">变形监测观测周期统计</div>
            <div id="bar-chart" style="height: 300px;"></div>   
          </div>         
        </van-tab>
        <van-tab title="视频监控" v-if="videoDirectoryData.length">     
          <van-field
            v-model="videoPointName"
            is-link
            arrow-direction="down"
            readonly
            :disabled="videoDirectoryData.length === 0? true : false"
            label="视频点："
            placeholder="请选择视频点"
            @click="showVideoPoint = true"
            style="margin-top: 16px;"
          />
          <van-popup v-model:show="showVideoPoint" round position="bottom">
            <van-picker
              title="选择视频点"
              :columns="videoDirectoryData"
              :columns-field-names="videoPointFieldName"
              @cancel="showVideoPoint = false"
              @confirm="confirmVideoPoint"
            />
          </van-popup>
          <div class="no-data" v-if="videoDirectoryData.length === 0">
            <img src="../../static/images/icon-no-data.png" alt="">
            <div>暂无数据</div>
          </div>     
          <div class="video" style="height: 200px;margin: 16px;" v-show="videoDirectoryData.length">
            <video 
              id="myVideo" 
              class="video-js vjs-default-skin vjs-big-play-centered"         
              style="object-fit: fill;width: 100%;height: 100%;"
            >
            </video>
          </div>   
        </van-tab>
        <van-tab title="闸坝情况记录">
          <div class="content">
            <div class="record">
              <div class="item" @click.prevent="showToast('暂无数据')">
                <div class="name">
                  <img src="../../static/images/icon-record-two.png" alt="">
                  <div>日常维护记录</div>
                </div>
                <div><img src="../../static/images/icon-record-arrow.png" alt=""></div>
              </div>
            </div>
            <div class="record">
              <div class="item" @click.prevent="handleGo('船闸操作记录')">
                <div class="name" >
                  <img src="../../static/images/icon-record-three.png" alt="">
                  <div>船闸操作记录</div>                
                </div>
                <div><img src="../../static/images/icon-record-arrow.png" alt=""></div>
              </div>
            </div>
            <div class="record">
              <div class="item" @click="isShow2 = !isShow2">
                <div class="name">
                  <img src="../../static/images/icon-record-five.png" alt="">
                  <div>安全检查</div>                
                </div>
                <div>
                  <img src="../../static/images/icon-record-down.png" alt="" v-show="isShow2 === false">
                  <img src="../../static/images/icon-record-up.png" alt="" v-show="isShow2 === true">
                </div>
              </div>
              <div class="count" v-show="isShow2 === true">
                <div class="info">
                  <div class="name">检查频次数</div>
                  <div class="value">{{ addStrongObj.inspectTimes }}</div>
                </div>
                <div class="info">
                  <div class="name">检查落实数</div>
                  <div class="value">{{ addStrongObj.inspectPraTimes }}</div>
                </div>
                <div class="info">
                  <div class="name">闸坝问题数</div>
                  <div class="value">{{ addStrongObj.damIssues }}</div>
                </div>
              </div>
            </div> 
            <div class="record">
              <div class="item" @click.prevent="showToast('暂无数据')">
                <div class="name">
                  <img src="../../static/images/icon-record-one.png" alt="">
                  <div>隐患跟踪处理</div>
                </div>
                <div><img src="../../static/images/icon-record-arrow.png" alt=""></div>
              </div>
            </div>                        
            <div class="record">
              <div class="item" @click="isShow1 = !isShow1">
                <div class="name">
                  <img src="../../static/images/icon-record-four.png" alt="">
                  <div>除险加固记录</div>                
                </div>
                <div>
                  <img src="../../static/images/icon-record-down.png" alt="" v-show="isShow1 === false">
                  <img src="../../static/images/icon-record-up.png" alt="" v-show="isShow1 === true">
                </div>
              </div>
              <div class="count" v-show="isShow1 === true">
                <div class="info">
                  <div class="name">风险预警数</div>
                  <div class="value">{{ addStrongObj.alarmNum }}</div>
                </div>
                <div class="info">
                  <div class="name">加固次数</div>
                  <div class="value">{{ addStrongObj.strongTimes }}</div>
                </div>
                <div class="info">
                  <div class="name">风险消除数</div>
                  <div class="value">{{ addStrongObj.disAlert }}</div>
                </div>
              </div>
            </div>                       
          </div>
        </van-tab>
        <!-- <van-tab title="水位变化统计">
          <div class="date">
            <van-cell-group>
              <van-field 
                v-model="waterLevelDate" 
                is-link
                arrow-direction="down"
                readonly
                label=""
                placeholder="请选择日期" 
                @click="showWaterLevelDate = true"
              />
            </van-cell-group>
            <van-calendar v-model:show="showWaterLevelDate" @confirm="onConfirmWaterLevelDate" :min-date="new Date(new Date().getTime()- 60 * 24 * 3600 * 1000)" :max-date="new Date()" />
          </div>            
          <div class="content">                        
            <div id="lineChart2" style="height: 200px;"></div>
          </div>
        </van-tab> -->
      </van-tabs>
    </div>  
    <van-dialog v-model:show="showDialog">
      <div style="width: 100%;height: 240px;">
        <img 
          :src="`${baseApi}${defInfoData.picUrl}`"
          @error="e => { e.target.src = errorImg }"
          style="width: 100%;height: 100%;"
        />
      </div>
    </van-dialog>
  </div>
</template>

<script setup>
  import { ref, onMounted, nextTick, onUnmounted } from 'vue';

  import { useRouter } from "vue-router";
  const router = useRouter();

  const baseApi = `${import.meta.env.VITE_APP_BASE_API}attach/img`;
  import errorImg from "../../static/images/no-image.png";
  
  import * as echarts from 'echarts/core';
  import { TooltipComponent, GridComponent, LegendComponent, DataZoomComponent, MarkLineComponent } from 'echarts/components';
  import { LineChart, BarChart } from 'echarts/charts';
  import { UniversalTransition } from 'echarts/features';
  import { CanvasRenderer } from 'echarts/renderers';
  echarts.use([TooltipComponent, GridComponent, LegendComponent, DataZoomComponent, MarkLineComponent, LineChart, BarChart, CanvasRenderer, UniversalTransition]);

  import videojs from 'video.js';
  import 'video.js/dist/video-js.css';
  import VideojsZhcnLanguage from 'video.js/dist/lang/zh-CN.json';
  videojs.addLanguage('zh-CN',VideojsZhcnLanguage);

  // 引入api
  import {
    getShipLockSmall, //获取船闸列表
    baseInfo, //基本信息
    addStrong, //除险加固记录、安全检查
    waterAlys, //水位变化统计分析
    getCycList, //获取周期
    defAyls, //多点单周期图
    defSingleAyls, //单点多周期图
    defInfo, //监测点统计
    cycleStatis, //变形监测观测周期统计
    videoDirectory, //获取视频点
    geVideotUrl, //获取视频URL
  } from "@/bridge-h5/utils/myapi";

  import { showToast } from "vant";

  //获取船闸
  const shipLock = ref('');
  const shipLockOptions = ref([]);
  const customFieldName = {
    text: 'name',
    value: 'name',
  };
  const cascaderValue = ref('');
  const getShipLockFunction = () => {
    getShipLockSmall("连江").then((res) => {
      if(res.code === 200){
        let data = [
          { text: "船闸",  value: "船闸", children: [] },
          { text: "水坝",  value: "水坝", children: [] }
        ];
        res.data.cz.forEach((item) => {
          data[0].children.push({
            text: item.name,
            value: item.name
          });
        });
        res.data.sb.forEach((item) => {
          data[1].children.push({
            text: item.name,
            value: item.name
          });
        });
        shipLockOptions.value = data;     
        shipLock.value = res.data.sb[0].name;
        cascaderValue.value = res.data.sb[0].name;
        baseInfoFunction();      
        isShowVideoMoudle();         
      }
    });
  };
  const showPicker = ref(false);
  const confirmShipLock = ({ selectedOptions }) => {
    showPicker.value = false;
    // shipLock.value = selectedOptions[0].name === "全部"? "" : selectedOptions[0].name;
    shipLock.value = cascaderValue.value;
    isShowVideoMoudle();   

    let currentTab = tabActive.value;
    if(currentTab === 0){
      baseInfoFunction();   
    }else if(currentTab === 1){
      defInfoFn();
      currentActive.value = 1;
      getCycListFunction();    
      cycleStatisFunction();
    }else if(currentTab === 2){
      videoDirectoryFunction();
    }else if(currentTab === 3){
      addStrongFunction();
    } 
    // initLineChart2();        
  };

  //基本信息
  const baseInfoObj = ref({});
  const baseInfoFunction = () => {
    baseInfo(shipLock.value).then((res) => {
      if(res.code === 200 && res.data){
        baseInfoObj.value = res.data;
      }
    });
  };

  const tabActive = ref(0);
  const onClickTab = ({ title }) => {
    if(title === "变形监测分析"){
      currentActive.value = 1;
      defInfoFn();
      getCycListFunction();
      cycleStatisFunction();
    }else if(title === "闸坝情况记录"){
      addStrongFunction();
    }else if(title === "水位变化统计"){
      initLineChart2();
    }else if(title === "视频监控"){
      initVideo();
    }
  };

  //变形监测分析
  const defInfoData = ref({});
  const defInfoFn = () => {
    defInfo(shipLock.value).then((res) => {
      if(res.code === 200){
        defInfoData.value = res.data;
      }
    });
  };
  const currentActive = ref(1);
  const currentActiveChange = (val) => {
    currentActive.value = val;
    singleType.value = "周期";
    if(val === 1){
      defAylsFunction();
    }else{
      defSingleAylsFunction();
    }
  };
  const cycle = ref('');
  const showTypePicker = ref(false);
  const showTypePickerFn = () => {
    showTypePicker.value = true;
    //隐藏echarts tooltip
    let lineChart = echarts.getInstanceByDom(document.getElementById("lineChart1"));
    lineChart.dispatchAction({
      type: 'hideTip'
    });
  };
  const singleType = ref('周期');
  const singleTypeData = [
    { text: '周期', value: '周期' },
    { text: '时间', value: '时间' },
  ];
  const confirmType = ({ selectedOptions }) => {
    showTypePicker.value = false;
    singleType.value = selectedOptions[0].value;
    defSingleAylsFunction();
  };
  const singleValue1 = ref('');
  const singleValue2 = ref('');  
  const cycleOptions = ref([]);
  const showCyclePicker = ref(false);
  const cycleFieldName = {
    text: 'cycName',
    value: 'cycName',
  };
  const currentCycle = ref('');
  const showCycle = (type) => {
    if(!cycleOptions.value.length){
      showToast("暂无数据");
      return;
    }
    //隐藏echarts tooltip
    let lineChart = echarts.getInstanceByDom(document.getElementById("lineChart1"));
    lineChart.dispatchAction({
      type: 'hideTip'
    });

    currentCycle.value = type;
    showCyclePicker.value = true;
  };
  const confirmCycle = ({ selectedOptions }) => {
    showCyclePicker.value = false;
    if(currentCycle.value === 'cycle'){
      cycle.value = selectedOptions[0].cycName;
      defAylsFunction();
    }else if(currentCycle.value === 'singleValue1'){
      singleValue1.value = selectedOptions[0].cycName;
      defSingleAylsFunction();
    }else if(currentCycle.value === 'singleValue2'){
      singleValue2.value = selectedOptions[0].cycName;
      defSingleAylsFunction();
    }        
  };
  const pointName = ref('');
  const pointNameData = ref([]);
  const showPointPicker = ref(false);
  const showPointPickerFn = () => {
    showPointPicker.value = true;
    //隐藏echarts tooltip
    let lineChart = echarts.getInstanceByDom(document.getElementById("lineChart1"));
    lineChart.dispatchAction({
      type: 'hideTip'
    });
  };
  const confirmPoint = ({ selectedOptions }) => {
    showPointPicker.value = false;
    pointName.value = selectedOptions[0].value;
    defSingleAylsFunction();
  };
  const singleTime = ref('');
  const showCalendar = ref(false);
  const showCalendarFn = () => {
    showCalendar.value = true;
    //隐藏echarts tooltip
    let lineChart = echarts.getInstanceByDom(document.getElementById("lineChart1"));
    lineChart.dispatchAction({
      type: 'hideTip'
    });
  };
  const onConfirmCalendar = (values) => {
    const [start, end] = values;
    singleTime.value = new Date(start).format('yyyy-MM-dd') + '~' + new Date(end).format('yyyy-MM-dd');
    showCalendar.value = false;
    defSingleAylsFunction();
  };
  const getCycListFunction = () => {
    getCycList(shipLock.value).then((res) => {
      if(res.code === 200){
        res.data.forEach((item) => {
          item.cycName = `第${item.cyc}周期`;
        }); 
        cycleOptions.value = res.data;
        if(res.data.length){
          cycle.value = res.data[0].cycName;
          singleValue1.value = res.data[3].cycName;
          singleValue2.value = res.data[0].cycName;          
        }else{
          cycle.value = "";
          singleValue1.value = "";
          singleValue2.value = "";
        }  
        defAylsFunction();
      }
    });
  };
  const currentType1 = ref("累积");
  const changeType1 = (val) => {
    currentType1.value = val;
    defAylsFunction();
  };
  const currentType2 = ref("累积");
  const changeType2 = (val) => {
    currentType2.value = val;
    defSingleAylsFunction();
  };
  const aylsXAxisData = ref([]);
  const aylsSeriesData = ref([]);
  const legendData = ref({});
  const defAylsFunction = () => {
    defAyls(shipLock.value, cycle.value.replace('第','').replace('周期','')).then((res) => {
      if(res.code === 200){
        if(res.data.length){
          let nData = [];
          let eData = [];
          let zData = [];
          let yujing1 = [];
          let yujing2 = [];

          let thisnData = [];
          let thiseData = [];
          let thiszData = [];
          pointNameData.value = [];
          aylsXAxisData.value = [];
          res.data.forEach((item) => { 
            pointNameData.value.push(
              { text: item.pointName, value: item.pointName }              
            );
            aylsXAxisData.value.push(item.pointName);
            nData.push(item.acDn);
            eData.push(item.acDe);
            zData.push(item.acDz);
            yujing1.push(30);
            yujing2.push(-30);
            thisnData.push(item.thisDn);
            thiseData.push(item.thisDe);
            thiszData.push(item.thisDz);
          });
          pointName.value = pointNameData.value[0].value;
          if(currentType1.value === "累积"){
            aylsSeriesData.value = [
              {
                name: '累积变化量N',
                type: 'line',
                //smooth: true,
                data: nData
              },
              {
                name: '累积变化量E',
                type: 'line',
                //smooth: true,
                data: eData
              },
              {
                name: '累积变化量Z',
                type: 'line',
                //smooth: true,
                data: zData
              },
              {
                name: '预警值',
                type: 'line',
                data: yujing1,  
                showSymbol: false,  
                lineStyle: {
                  color: '#BD3124',
                  width: 1,
                  type: 'dashed'
                },           
              },
              {
                name: '预警值',
                type: 'line',
                data: yujing2,
                showSymbol: false,  
                lineStyle: {
                  color: '#BD3124',
                  width: 1,
                  type: 'dashed'
                },       
              }
            ];
            legendData.value = {
              data: ['累积变化量N', '累积变化量E', '累积变化量Z', '预警值', '预警值'],
              textStyle: {
                color: 'rgba(0,0,0,0.8)'
              }
            };
          }else if(currentType1.value === "本次"){
            aylsSeriesData.value = [
              {
                name: '本次变化量N',
                type: 'line',
                //smooth: true,
                data: thisnData
              },
              {
                name: '本次变化量E',
                type: 'line',
                //smooth: true,
                data: thiseData
              },
              {
                name: '本次变化量Z',
                type: 'line',
                //smooth: true,
                data: thiszData
              }
            ];
            legendData.value = {
              data: ['本次变化量N', '本次变化量E', '本次变化量Z'],
              textStyle: {
                color: 'rgba(0,0,0,0.8)'
              }
            };
          }
         
          initLineChart1();
        }else{
          pointNameData.value = [];
          pointName.value = "";

          aylsXAxisData.value = [];
          aylsSeriesData.value = [];
          initLineChart1();
        }      
      }
    });
  };
  const defSingleAylsFunction = () => {
    defSingleAyls(
      singleType.value === '周期'? singleValue1.value.replace('第','').replace('周期','') : singleTime.value.split('~')[0], 
      singleType.value === '周期'? singleValue2.value.replace('第','').replace('周期','') : singleTime.value.split('~')[1], 
      singleType.value === '周期'? 1 : 2, 
      pointName.value, 
      shipLock.value
    ).then((res) => {
      if(res.code === 200){
        let nData = [];
        let eData = [];
        let zData = [];
        let yujing1 = [];
        let yujing2 = [];

        let thisnData = [];
        let thiseData = [];
        let thiszData = [];
        aylsXAxisData.value = [];
        res.data.forEach((item) => {
          if(singleType.value === 2){
            aylsXAxisData.value.push(item.createTime);
          } else {
            aylsXAxisData.value.push(item.cyc);
          }         

          nData.push(item.acDn);
          eData.push(item.acDe);
          zData.push(item.acDz);
          yujing1.push(30);
          yujing2.push(-30);
          thisnData.push(item.thisDn);
          thiseData.push(item.thisDe);
          thiszData.push(item.thisDz);
        });

        if(currentType2.value === "累积"){
            aylsSeriesData.value = [
              {
                name: '累积变化量N',
                type: 'line',
                //smooth: true,
                data: nData
              },
              {
                name: '累积变化量E',
                type: 'line',
                //smooth: true,
                data: eData
              },
              {
                name: '累积变化量Z',
                type: 'line',
                //smooth: true,
                data: zData
              },
              {
                name: '预警值',
                type: 'line',                
                data: yujing1,
                showSymbol: false,  
                lineStyle: {
                  color: '#BD3124',
                  width: 1,
                  type: 'dashed'
                },   
              },
              {
                name: '预警值',
                type: 'line',
                data: yujing2,
                showSymbol: false,  
                lineStyle: {
                  color: '#BD3124',
                  width: 1,
                  type: 'dashed'
                },   
              }
            ];
            legendData.value = {
              data: ['累积变化量N', '累积变化量E', '累积变化量Z', '预警值', '预警值'],
              textStyle: {
                color: 'rgba(0,0,0,0.8)'
              }
            };
          }else if(currentType2.value === "本次"){
            aylsSeriesData.value = [
              {
                name: '本次变化量N',
                type: 'line',
                //smooth: true,
                data: thisnData
              },
              {
                name: '本次变化量E',
                type: 'line',
                //smooth: true,
                data: thiseData
              },
              {
                name: '本次变化量Z',
                type: 'line',
                //smooth: true,
                data: thiszData
              }
            ];
            legendData.value = {
              data: ['本次变化量N', '本次变化量E', '本次变化量Z'],
              textStyle: {
                color: 'rgba(0,0,0,0.8)'
              }
            };
          }
        initLineChart1();
      }
    });
  };
  const initLineChart1 = () => {
    nextTick(() => {
      let lineChart = echarts.getInstanceByDom(document.getElementById("lineChart1"));
      if(lineChart != null && lineChart != "" && lineChart != undefined){
        lineChart.dispose();
      }
      lineChart = echarts.init(document.getElementById('lineChart1'));
      let option;
      option = {
        grid: {
          top: '25%',
          left: '40px',
          right: '15px',
          bottom: '40px',
        },
        tooltip: {
          trigger: 'axis',
          confine: true, //限制在图表区域内
 
          formatter: function (params) {
            let template = `<b>${params[0].axisValue}</b><br>`;         
            for(let i = 0; i < 3; i++){
              let item = params[i];
              template += item.marker + item.seriesName + ': ' + `<b style="float:right;padding-left: 20px;">${item.data}mm</b><br>`
            }  
            return template  
          },  
        },
        legend: legendData.value,
        xAxis: {
          type: 'category',
          data: aylsXAxisData.value,
          axisLabel: {
            interval:0,            
          },
          axisLine: {
            onZero: true // 将X轴在Y轴0刻度的位置固定
          }
        },
        yAxis: {
          type: 'value',
          name: '单位：mm',
          axisLabel: {
            color: "#595959"
          },
          splitLine: {
            show: true,
            lineStyle:{
              // type:'dashed',
              color: '#F0F0F0'
            }
          } 
        },
        series: aylsSeriesData.value
      };

      option && lineChart.setOption(option);
    });
  };
  const cycleStatisxAxisData = ref([]);
  const cycleStatisseriesData = ref([]);
  const cycleStatisFunction = () => {
    cycleStatis(shipLock.value).then((res) => {
      cycleStatisxAxisData.value = [];
      cycleStatisseriesData.value = [];
      if(res.code === 200){
        nextTick(() => {
          res.data.forEach((item) => {
            cycleStatisxAxisData.value.push(item.time);
            cycleStatisseriesData.value.push(item.cyc);
          });

          let barChart = echarts.getInstanceByDom(document.getElementById("bar-chart"));
          if (barChart == null) {
            barChart = echarts.init(document.getElementById("bar-chart"));
          }
          let option;
          option = {
            tooltip: {
              trigger: "axis",
              axisPointer: {
                type: "shadow",
              },
              confine: true, //限制在图表区域内
              formatter: function(params){
                let value = params[0].value + '次';
                return params[0].seriesName + '<br/>' + params[0].name + ' : ' + value;
              }
            },
            grid: {
              top: "15%",
              left: "12%",
              right: "12%",
              bottom: "20%",
              containLabel: true,
            },
            dataZoom: [
              {
                show: false,
                type: "inside",
                // maxValueSpan: 8,
                startValue: 0,
                endValue: 5,
                zoomLock: false,
              },
            ],
            xAxis: [
              {
                type: "category",
                data: cycleStatisxAxisData.value,
                name: "时间",
                // axisTick: {
                //   alignWithLabel: true, //控制刻度线是否与刻度标签对齐
                //   show: false, //是否显示刻度线
                // },
                nameTextStyle: {
                  fontWeight: "500",
                  fontSize: "12px",
                  color: "#595959",         
                },
                axisLabel:{
                  interval: 0,
                  rotate: 60,
                  // formatter: function (value) {
                  //   //x轴的文字改为竖版显示
                  //   var str = value.split("");
                  //   return str.join("\n");
                  // }
                },
              },  
            ],
            yAxis: [
              {
                type: "value",
                name: '统计次数', 
                nameTextStyle: {
                  fontWeight: "500",
                  fontSize: "12px",
                  color: "#595959",
                  padding: [0,30,0,0]
                },
                nameGap: 15,       
              },
            ],
            series: [
              {
                name: "统计次数",
                data: cycleStatisseriesData.value,
                type: "bar",
                barWidth: 10,
                // label: {
                //   show: true,
                //   position: "top",
                // },
                itemStyle: {
                  color: '#6B9BFD'
                },
              },
            ],
          };

          option && barChart.setOption(option);
        });
      }
    });
  };

  //闸坝情况记录
  const isShow1 = ref(false);
  const isShow2 = ref(false);
  //除险加固记录、安全检查
  const addStrongObj = ref({});
  const addStrongFunction = () => {
    addStrong(shipLock.value).then((res) => {
      if(res.code === 200 && res.data){
        addStrongObj.value = res.data;
      }
    });
  }
  const handleGo = (val) => {
    if(val == "船闸操作记录"){
      router.push({
        path: "/lockRecord",
        query: {
          shipLockName: shipLock.value
        },
      });
    } else if(val == "日常维护记录"){
      router.push({
        path: "/records",
        query: {
          shipLockName: shipLock.value
        },
      });
    }  
  };

  //水位变化统计
  const waterLevelDate = ref('');
  const showWaterLevelDate = ref(false);
  const onConfirmWaterLevelDate = (value) => {
    showWaterLevelDate.value = false;
    waterLevelDate.value = new Date(value).format('yyyy-MM-dd');
    initLineChart2();
  };
  const initLineChart2 = () => {
    nextTick(() => {
      waterAlys(shipLock.value, waterLevelDate.value).then((res) => {
        if(res.code === 200){
          let xAxisData = [];
          let seriesData = [];
          res.data.forEach((item) => {
            xAxisData.push(item.logDate.slice(11,16));          
            seriesData.push(item.waterLevel);
          });
          let lineChart = echarts.getInstanceByDom(document.getElementById("lineChart2"));
          if(lineChart != null && lineChart != "" && lineChart != undefined){
            lineChart.dispose();
          }
          lineChart = echarts.init(document.getElementById('lineChart2'));
      
          let option;
          option = {
            tooltip: {
              trigger: 'axis',
              confine: true, //限制在图表区域内
            },
            grid: {
              top: '40px',
              left: '40px',
              right: '15px',
              bottom: '45px',
            },
            xAxis: {
              type: 'category',
              name: '时间',
              data: xAxisData,
              nameTextStyle: {
                fontWeight: "500",
                fontSize: "10px",
                color: "rgba(0,0,0,0.45)",
              },
            },
            yAxis: {
              type: 'value',
              name: '水位（m）',
            },
            series: [
              {
                data: seriesData,
                type: 'line',
                
              }
            ]
          };
          option && lineChart.setOption(option);
        }
      });  
    });
  };

  //弹窗查看图片
  const showDialog = ref(false);
  const myImage = ref('');
  const viewImage = () => {
    showDialog.value = true;
  };

  //视频监控  
  const myPlayer = ref(null);
  const initVideo = () => {
    nextTick(() => { 
      myPlayer.value = videojs("myVideo",{
        language: 'zh-CN',  //汉化
        autoplay: true, // true,浏览器准备好时开始播放
        loop: true, // 导致视频一结束就重新开始
        controls: true, //取消视频中的进度条
        muted: true, //是否静音
        preload: 'metadata', //auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）      
        notSupportedMessage: '此视频暂无法播放，请稍后再试', // 无法播放媒体源时显示的默认信息
        textTrackDisplay: false,
        techOrder: ['html5', 'flash']
      }); 
    });
    videoDirectoryFunction();
  };   
  const showVideoPoint = ref(false);
  const videoDirectoryData = ref([]);
  const videoPoint = ref('');
  const videoPointName = ref('');
  const videoPointFieldName = {
    text: 'name',
    value: 'id',
  };
  const confirmVideoPoint = ({ selectedOptions }) => {
    videoPoint.value = selectedOptions[0].id;
    videoPointName.value = selectedOptions[0].name;
    showVideoPoint.value = false;
    geVideotUrlFunction();
  };
  const videoDirectoryFunction = () => {
    videoDirectory(shipLock.value).then((res) => {
      if(res.code === 200 && res.data.length){
        videoDirectoryData.value = res.data;
        videoPoint.value = res.data[0].id;
        videoPointName.value = res.data[0].name;        
        geVideotUrlFunction();
      }else{
        videoDirectoryData.value = [];
        videoPoint.value = "";     
        videoPointName.value = ""; 
      }
    });
  };
  const geVideotUrlFunction = () => {
    geVideotUrl(videoPoint.value).then((res) => {
      if(res.code === 200 && res.data){
        // const myPlayer = videojs("myVideo"); 
        myPlayer.value.src([
          {
            type: 'application/x-mpegURL',
            src: res.data.url, //视频播放地址
          }
        ]); 
        myPlayer.value.play();
      }
    });
  };
  const isShowVideoMoudle = () => {
    videoDirectory(shipLock.value).then((res) => {
      if(res.code === 200 && res.data.length){
        videoDirectoryData.value = res.data;
      }else{
        tabActive.value = 0;
        videoDirectoryData.value = [];
        setTimeout(() => {
          // const myPlayer = videojs("myVideo");    
          if(myPlayer.value){
            myPlayer.value.dispose();
          }   
        }, 300); 
      }
    });
  };

  onMounted(() => {
    singleTime.value = new Date().format('yyyy-MM-dd') + '~' + new Date().format('yyyy-MM-dd');
    waterLevelDate.value = new Date().format('yyyy-MM-dd');
    getShipLockFunction();
  });

  onUnmounted(() => {
    setTimeout(() => {
      // const myPlayer = videojs("myVideo");    
      if(myPlayer.value){
        myPlayer.value.dispose();
      }   
    }, 300);    
  });
</script>

<style lang="scss" scoped>
  .container{
    width: 100%;
    height: 100%;    
    .header{
      background-color: #fff;       
      .selected{
        padding: 8px 16px 4px 16px;
        :deep(.van-field){
          box-shadow: 0px 1px 8px 0px rgba(38,111,232,0.08);
          border-radius: 2px;
        }
      }          
    }
    .tab{
      .basic-info{
        margin: 16px;
        background: #FFFFFF;
        box-shadow: 0px 4px 8px 2px rgba(0,0,0,0.08);
        border-radius: 8px;
        .item{
          display: flex;
          font-size: 16px;            
          color: rgba(0,0,0,0.85);
          // text-align: center;
          padding: 12px;
          // &:nth-child(odd){
          //   background-color: rgba(45,120,237,0.1);
          //   .name{
          //     border-right: 1px solid #fff;
          //   }
          // }
          .name{
            width: 40%;
            font-weight: 400;
            font-size: 14px;
            color: #595959;
          }
          .value{
            width: 60%;
            font-weight: 500;
            font-size: 14px;
            color: #262626;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            text-align: right;
          }
        }
      }
      .content{
        margin: 16px;
        background: #FFFFFF;
        box-shadow: 0px 4px 8px 2px rgba(0,0,0,0.08);
        border-radius: 8px;   
        .title{
          font-size: 16px;
          font-weight: bold;
          color: rgba(0,0,0,0.85);
          padding: 8px 0px 8px 16px;
          background: rgba(22,93,255,0.05);
          box-shadow: 0px 1px 0px 0px rgba(0,0,0,0.1);
        }
        .btn-group{
          display: flex;
          justify-content: center;
          .btn{
            margin-top: 16px;
            padding: 8px 24px;
            background-color: #F7F7F7;
            border-radius: 8px;    
            color: #565656;        
          }
          .active{
            color: #fff;
            background-color: #165DFF;
          }
        }
        .filter{
          display: flex;
          padding: 8px;
          .my-btn{
            display: flex;
            margin: 10px 0;
            .btn{
              margin-right: 5px;
              color: #000000;
              border: 1px solid #BBBBBB;
              padding: 0 10px;
              display: flex;
              align-items: center;
            }
            .active{
              color: #FFFFFF;
              background-color: #3580FF;
              border: 1px solid #3580FF;
            }
          }
        }     
        .record{
          margin: 0 8px;
          padding: 8px 0;
          border-bottom: 1px solid rgba(0,0,0,0.2);
          &:last-child{
            border-bottom: none;
          }
          .item{
            display: flex;
            justify-content: space-between;
            align-items: center;
            .name{
              display: flex;
              align-items: center;
              font-size: 16px;
              // font-weight: bold;
              font-weight: 500;
              color: rgba(0,0,0,0.85);           
              img{
                width: 20px;
                height: 20px;
                padding-right: 8px;
              }
            }
          }
          .count{
            display: flex;
            justify-content: space-between;
            margin-top: 16px;
            padding: 0 8px;
            .info{   
              width: 100%;          
              text-align: center;
              .name{
                background-color: #F7F7F7;
                padding: 4px 0;
                color: #262626;
                font-weight: bold;
              }  
              .value{
                font-size: 16px;
                font-weight: bold;
                color: #266FE8;
                padding-top: 4px;
              }            
            }
          }
        }        
      }      
      .date{
        margin: 16px;
      }
      .no-data{
        font-size: 16px;
        color: #BBBBBB;
        text-align: center;
        margin-top: 40%;
      }
      .point-statistics{
        margin: 16px;
        background: #FFFFFF;
        box-shadow: 0px 4px 8px 2px rgba(0,0,0,0.08);
        border-radius: 8px;
        .sub-item{
          margin: 0 20px;
          .title{
            display: flex;
            align-items: center;
            font-weight: 500;
            font-size: 14px;
            color: #262626;
            margin-bottom: 8px;
            img{
              width: 14px;
              height: 14px;
              padding-right: 4px;
            }
          }
          .sub-content{
            display: flex;
            align-items: center;
            .sub-info{
              width: 50%;
              .name{
                font-weight: 400;
                font-size: 12px;
                color: #595959;
              }
              .value{
                font-weight: bold;
                font-size: 21px;
                color: #165DFF;
              }
            }
          }
        }
        .sub-item-two{
          display: flex;
          align-items: center;
          margin: 0 20px;
          .sub-content-two{
            width: 50%;
            margin-bottom: 16px;
            .title{
              display: flex;
              align-items: center;
              font-weight: 500;
              font-size: 14px;
              color: #262626;
              margin-bottom: 8px;
              img{
                width: 14px;
                height: 14px;
                padding-right: 4px;
              }
            }
            .value{
              font-weight: bold;
              font-size: 21px;
              color: #165DFF;
            }
          }
        }
        .pic-text{
          display: flex;
          align-items: center;
          font-weight: 400;
          font-size: 16px;
          color: #165DFF;
          cursor: pointer;
          border-top: 1px solid #F0F0F0;
          padding: 12px 0px 12px 20px;
          img{
            padding-left: 8px;
          }
        }
      }      
    } 
  }
</style>